<template>
	<view class="content">
		<view style="background-color: f2f3f5; width: 100%; height: 30rpx;">

		</view>

		<view class="search-context">
			<u-search placeholder="请输入关键词" v-model="search" @search="doSearch()" bg-color="#fff"
				:show-action="false"></u-search>
		</view>
		<view class="t-goods-list" v-if="goodsList&&goodsList.length>0">
			<view class="t-goods-item" v-for="(item,index) in goodsList" :key="index" @click="clickItem(item.goodsId)">
				<image class="t-goods-img" :src="item.goodsPic"></image>
				<view class="t-goods-name"><text>{{item.goodsName}}</text></view>
				<view class="t-goods-desc"><text>{{item.goodsDesc}}</text></view>
				<view class="t-goods-tags">
					<view class="t-tag" style="color: #00ed0c;">
						<text>{{item.type==1?'文创商品':'当地特产'}}</text>
					</view>
				</view>
				<view class="t-goods-price">
					<text class="t-rmb">¥</text>
					<text class="t-p1">{{item.goodsPrice}}</text>
					<text class="t-p2">¥{{item.goodsOriginPrice}}</text>
				</view>
			</view>
		</view>
		<view class="t-empty" v-else-if="isInit">
			<image src="/static/goods.png"></image>
			<view class="t-empty-desc">没有商品哦~</view>
		</view>
		<view class="t-loading-more" v-if="isLoading || isNoMore && goodsList && goodsList.length>0">
			<image src="../../static/loading.png" v-if="isLoading"></image>
			<view class="t-loading-desc" v-if="isLoading || isNoMore">{{isLoading?'加载中...':(isNoMore?'没有更多数据了':'')}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '../../utils/request';
	export default {
		data() {
			return {
				isShowact: false,
				search: '',
				//商品列表
				goodsList: [],
				//页码，从1开始
				pageNo: 1,
				//每页数据
				pageSize: 10,
				//是否没有更多数据了
				isNoMore: false,
				//是否加载中
				isLoading: false,
				//是否初始化完成
				isInit: false,
			}
		},
		onLoad() {
			//去请求服务器获取商品列表数据
			this.isLoading = true;
			//这里模拟加载到的商品列表如下

			this.request({
				url: "/goods-info",
				method: 'GET',
				data: {
					pageSize: this.pageSize,
					pageNo: this.pageNo
				}
			}).then(res => {
				if (res.code === '1') {
					this.goodsList = this.goodsList.concat(res.data)
					this.pageNo = this.pageNo + 1
					//初始化完成
					this.isInit = true;
					//关闭加载动画
					this.isLoading = false;
				} else {
					console.log("失败")
				}
			}).catch(() => {
				console.log("系统错误")
			})
			this.isLoading = false
			//给商品列表赋值
			//如果第一次请求数据量少于pageSize说明只有一页，直接显示没有更多数据
			if (!this.goodsList || this.goodsList.length < this.pageSize) {
				this.isNoMore = true;
			}

		},
		//页面滑动到底部监听--刷新下一页
		onReachBottom() {
			//这里模拟分页加载数据，数据总数为12条，2页

			//如果已经没有更多数据了，就不进行操作
			if (this.isNoMore) {
				return;
			}
			//否则进行请求
			this.isLoading = true;
			//页码加1
			this.pageNo += 1;

			this.request({
				url: "/goods-info",
				method: 'GET',
				data: {
					pageSize: this.pageSize,
					pageNo: this.pageNo
				}
			}).then(res => {
				if (res.code === '1') {
					this.goodsList = this.goodsList.concat(res.data)
					//初始化完成
					this.isInit = true;
					//关闭加载动画
					this.isLoading = false;
					if (!res || res.length < this.pageSize) {
						this.isNoMore = true;
					}
				} else {
					console.log("失败")
				}
			}).catch(() => {
				console.log("系统错误")
			})

		},
		methods: {
			//点击的商品
			clickItem(index) {
				console.log("当前点击的商品下标是" + index);
				uni.navigateTo({
					url: "/pages/good-detail/good-detail?goodsId=" + index
				})
			},
			doSearch() {
				console.log(this.search)
				this.request({
					url: "/goods-info/search",
					method: 'GET',
					data: {
						search: this.search
					}
				}).then(res => {
					if (res.code === '1') {
						this.goodsList = []
						this.goodsList = this.goodsList.concat(res.data)
						//初始化完成
						this.isInit = true;
						//关闭加载动画
						this.isLoading = false;


					} else {
						console.log("失败")
					}
				}).catch(() => {
					console.log("系统错误")
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-context {
		width: 90%;

		margin: 0 auto;

		height: 60rpx;

	}

	.content {
		box-sizing: border-box;
		min-width: 100vw;
		min-height: 100vh;
		background-color: #f2f3f5;
		padding-bottom: 80rpx;


		.t-goods-list {
			padding-top: 18rpx;
			box-sizing: border-box;
			width: 690rpx;
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.t-goods-item {
				box-sizing: border-box;
				width: 336rpx;
				height: 560rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
				overflow: hidden;
				margin-bottom: 18rpx;
				position: relative;

				.t-goods-img {
					width: 100%;
					height: 340rpx;
				}

				.t-goods-name {
					font-size: 28rpx;
					color: #000000;
					line-height: 30rpx;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					text-overflow: ellipsis;
					overflow: hidden;
					-webkit-box-orient: vertical;
					padding: 0rpx 18rpx;
					box-sizing: border-box;
					word-break: break-all;
				}

				.t-goods-desc {
					font-size: 24rpx;
					color: #9e9e9e;
					line-height: 26rpx;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					text-overflow: ellipsis;
					overflow: hidden;
					-webkit-box-orient: vertical;
					padding: 0rpx 18rpx;
					box-sizing: border-box;
					margin-top: 16rpx;
					word-break: break-all;
				}

				.t-goods-tags {
					padding: 0rpx 18rpx;
					box-sizing: border-box;
					margin-top: 16rpx;

					.t-tag {
						font-size: 20rpx;
						border-radius: 4rpx;
						border: 1rpx solid;
						box-sizing: border-box;
						padding: 3rpx 5rpx;
						-webkit-line-clamp: 1;
						display: -webkit-box;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-box-orient: vertical;
						float: left;
						word-break: break-all;

						&:not(:last-child) {
							margin-right: 8rpx;
						}
					}
				}

				.t-goods-price {
					padding: 0rpx 18rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					position: absolute;
					width: 100%;
					bottom: 20rpx;
					left: 0rpx;
					width: 100%;

					.t-rmb {
						font-size: 26rpx;
						color: #000000;
					}

					.t-p1 {
						font-size: 32rpx;
						color: #000000;
						margin-left: 4rpx;
						font-weight: bold;
					}

					.t-p2 {
						font-size: 20rpx;
						color: #999999;
						margin-left: 10rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}

	.t-empty {
		width: 100%;
		height: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 320rpx;
			height: 320rpx;
		}

		.t-empty-desc {
			padding-bottom: 30rpx;
			padding-top: 20rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}

	.t-loading-more {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 60rpx;

		image {
			width: 36rpx;
			height: 36rpx;
			-webkit-animation: spin 1s 0s step-end infinite;
			animation: spin 1s 0s step-end infinite;
			margin-right: 12rpx;
		}

		.t-loading-desc {
			font-size: 28rpx;
			color: #999999;
		}


		@-webkit-keyframes spin {
			0% {
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
			}

			8% {
				-webkit-transform: rotate(30deg);
				transform: rotate(30deg);
			}

			16% {
				-webkit-transform: rotate(60deg);
				transform: rotate(60deg);
			}

			24% {
				-webkit-transform: rotate(90deg);
				transform: rotate(90deg);
			}

			32% {
				-webkit-transform: rotate(120deg);
				transform: rotate(120deg);
			}

			40% {
				-webkit-transform: rotate(150deg);
				transform: rotate(150deg);
			}

			48% {
				-webkit-transform: rotate(180deg);
				transform: rotate(180deg);
			}

			56% {
				-webkit-transform: rotate(210deg);
				transform: rotate(210deg);
			}

			64% {
				-webkit-transform: rotate(240deg);
				transform: rotate(240deg);
			}

			73% {
				-webkit-transform: rotate(270deg);
				transform: rotate(270deg);
			}

			82% {
				-webkit-transform: rotate(300deg);
				transform: rotate(300deg);
			}

			91% {
				-webkit-transform: rotate(330deg);
				transform: rotate(330deg);
			}

			100% {
				-webkit-transform: rotate(1turn);
				transform: rotate(1turn);
			}

		}

		@keyframes spin {
			0% {
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
			}

			8% {
				-webkit-transform: rotate(30deg);
				transform: rotate(30deg);
			}

			16% {
				-webkit-transform: rotate(60deg);
				transform: rotate(60deg);
			}

			24% {
				-webkit-transform: rotate(90deg);
				transform: rotate(90deg);
			}

			32% {
				-webkit-transform: rotate(120deg);
				transform: rotate(120deg);
			}

			40% {
				-webkit-transform: rotate(150deg);
				transform: rotate(150deg);
			}

			48% {
				-webkit-transform: rotate(180deg);
				transform: rotate(180deg);
			}

			56% {
				-webkit-transform: rotate(210deg);
				transform: rotate(210deg);
			}

			64% {
				-webkit-transform: rotate(240deg);
				transform: rotate(240deg);
			}

			73% {
				-webkit-transform: rotate(270deg);
				transform: rotate(270deg);
			}

			82% {
				-webkit-transform: rotate(300deg);
				transform: rotate(300deg);
			}

			91% {
				-webkit-transform: rotate(330deg);
				transform: rotate(330deg);
			}

			100% {
				-webkit-transform: rotate(1turn);
				transform: rotate(1turn);
			}
		}
	}
</style>